<template>
    <a-collapse accordion>
        <a-collapse-panel key="1" header="规则描述">
            <a-collapse>
                <a-collapse-panel :key="k" :header="v.title" v-for="(v, k) in ruleList">
                    <a-tag v-for="(rv, rk) in v.rules" :key="rk" style="margin: 5px">{{ rv }}</a-tag>
                </a-collapse-panel>
            </a-collapse>
        </a-collapse-panel>
        <a-collapse-panel key="2" header="新增规则">
            <a-form
                :form="form"
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 12 }"
                @submit="addCustRules"
                style="width: 100%"
            >
                <a-form-item label="规则名称">
                    <a-input v-decorator="['title', { rules: [{ required: true, message: '请输入规则名称' }] }]" />
                </a-form-item>
                <a-form-item label="规则描述">
                    <a-input v-decorator="['desc', { rules: [{ message: '请输入规则描述' }] }]" />
                </a-form-item>
                <a-form-item label="过滤字段">
                    <div class="filter-text">
                        <a-input v-decorator="['ruleTag']" />
                        <a-button @click="addTag">添加</a-button>
                    </div>
                </a-form-item>
                <a-form-item>
                    <a-tag closable @close="closeTag(k)" v-for="(v, k) in tags" :key="k">
                        {{ v }}
                    </a-tag>
                </a-form-item>
                <a-divider style="margin: 12px 0px" />
                <a-row type="flex">
                    <a-col>
                        <a-button html-type="submit" style="margin-right: 10px">
                            新增规则
                        </a-button>
                    </a-col>
                    <a-col><a-button @click="clearCustRules">清空规则</a-button></a-col>
                </a-row>
            </a-form>
        </a-collapse-panel>
    </a-collapse>
</template>
<script>
    import { readData, writeData } from '@/util/file-action'
    export default {
        name: 'RuleCollapse',
        props: {
            ruleList: {
                type: Array,
                default: () => [],
            },
        },
        data() {
            return {
                newRule: {},
                targetKeys: ['0'],
                selectedKeys: [],
                form: this.$form.createForm(this, { name: 'setCustRules' }),
                tags: [],
            }
        },
        mounted() {
            readData('rule')
        },
        methods: {
            addCustRules(e) {
                e.preventDefault()
                const { tags, newRule } = this
                this.form.validateFields((err, values) => {
                    if (!err) {
                        if (tags.length > 0) {
                            const { description, title } = values
                            const newRule = {
                                key: title,
                                description: description ?? '',
                                title,
                                rules: this.tags,
                            }
                            writeData([newRule], 'ruleList', 'rule')
                            this.form.setFieldsValue({ title: '' })
                        } else {
                            this.$message.error('过滤字段为空')
                        }
                    }
                })
            },
            clearCustRules() {},
            addTag() {
                const ruleTag = this.form.getFieldValue('ruleTag')
                if (ruleTag) {
                    this.form.setFieldsValue({ ruleTag: '' })
                    this.tags.push(ruleTag)
                }
            },
            closeTag(k) {
                this.tags.splice(k, 1)
            },
        },
    }
</script>
<style lang="less" scoped>
    .filter-text {
        display: flex;
        input {
            margin-right: 5px;
        }
    }
    .ant-form-item {
        margin: 0px;
        display: flex;
        justify-content: center;
    }
    .ant-row-flex {
        display: flex;
        justify-content: flex-end;
    }
</style>
